<template>
	<!-- 微信授权登录 -->
	<!-- 周一航 2023-4-3-->
	<view>
		<view class="body">
			<!-- 新版 -->
			<u-button customStyle="width: 90%;position: absolute;top: 60%;left: 5%;background: #EED5BE;color: #3C3B41;" @click="getUserProfile()" text="微信授权登录" :throttleTime="3000"></u-button>
			<u-overlay :show="writePhone">
				<view style="width: 100%;height: 100%;background: white;">
						<view style="margin: 30% auto;width: 80%;">
							<view style="font-size: 60rpx;font-weight: bold;margin-bottom: 14%;">输入您手机号</view>
							<u-code-input v-model="phone" mode="line" size="24" :space="2" :maxlength="11" hairline></u-code-input>
						</view>
						<u-code
								ref="uCode1"
								@change="codeChange1"
								change-text="倒计时XS"
								keep-running
								@start="disabled = true"
								@end="disabled = false"
						></u-code>
						<u-button
							type="primary"
								@tap="getCode"
								:text="tips"
							size="small"
							:disabled="disabled"
							customStyle="height:80rpx;width:90%"
						></u-button>
				</view>
			</u-overlay>
			<u-overlay :show="writeCode">
				<view style="width: 100%;height: 100%;background: white;">
				<!-- <input type="text"> -->
						<view style="margin: 30% auto;width: 80%;">
							<view style="font-size: 60rpx;font-weight: bold;">输入验证码</view>
							<view style="margin: 6% 0;">验证码已发送到 +86 {{phone.substring(0,3)}} **** {{phone.substring(7,11)}}</view>
							<u-code-input v-model="code" hairline color="#0bc3f5" borderColor="#0bc3f5" @finish="codeFinish()"></u-code-input>
						</view>
						<u-code
								ref="uCode1"
								@change="codeChange1"
								change-text="倒计时XS"
								@start="disabled = true"
								@end="disabled = false"
						></u-code>
								<!-- keep-running -->
						<u-button
							type="primary"
								@tap="getCode"
								:text="tips"
							size="small"
							:disabled="disabled"
							customStyle="height:80rpx;width:90%"
						></u-button>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfoData: {},
				// 输入手机号遮罩是否显示
				writePhone: false, 
				// 输入验证码遮罩是否显示
				writeCode: false, 
				// 是否开启倒计时
				disabled: false,
				// 获取验证码倒计时
				tips: '',
				// 验证码
				code: '',
				// 用户电话
				phone: "",
			}
		},
		onLoad() {
			// 微信缓存是否由用户信息
			this.wxCache()
		},
		methods: {
			// 微信缓存是否由用户信息
			wxCache(){
				const userInfo = wx.getStorageSync('user')
				if(userInfo != "" && userInfo.errCode != 20011){
					this.$myRequest({
						url: '/wxLogin/getUserInfo',
						data: {
							openid: userInfo.openid
						}
					}).then(res1 => {
						wx.setStorageSync('user', res1.data.data)
						uni.switchTab({
							url: '/pages/index/HomePage'
						})
					})
				}
			},
			// 验证到六位数验证码
			codeFinish(){
				this.$myRequest({
					url: '/wxLogin/verificationCode',
					data: {
						phone: this.phone,
						code: this.code
					}
				}).then(res => {
					if(res.data.flag){
						this.login();
					}else{
						uni.showToast({
							title: '验证码错误，请重新输入',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 获取验证码
			getCode() {
				// if(this.phone.length >= 11){ 
				const reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
				if(reg.test(this.phone)){ 
					this.userInfoData.phone = this.phone
					this.writePhone = false
					this.writeCode = true
					if (this.$refs.uCode1.canGetCode) {
						// 向后端请求验证码
						this.$myRequest({
							url: '/wxLogin/sendPhoneCode',
							data: {
								phone: this.phone
							}
						}).then(res => {
							if(!res.data.flag){
								uni.showToast({
									title: '发送验证码失败',
									icon: 'none',
									duration: 2000
								})
							}
						})
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode1.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 获取验证码倒计时
			codeChange1(text) {
				this.tips = text;
			},
			// 根据openid获取手机号
			getPhoneByOpenid(){
				this.$myRequest({
					url: '/wxLogin/getPhoneByOpenid',
					data: {
						openid: this.userInfoData.openid
					}
				}).then(res => {
					if(res.data.flag){
						wx.setStorageSync('token', res.data.data)
						// 微信登录方法
						// 如果验证码正确跳到首页
						this.$myRequest({
							url: '/wxLogin/getUserInfo',
							data: {
								openid: this.userInfoData.openid
							}
						}).then(res1 => {
							wx.setStorageSync('user', res1.data.data)
							uni.switchTab({
								url: '/pages/index/HomePage'
							})
						})
					}else{
						this.writePhone = true;
					}
				})
			},
			// 微信授权登录
			login(){
				this.$myRequest({
					method: 'POST',
					url: '/wxLogin/login',
					data: this.userInfoData
				}).then(res => {
					if(res.data.flag){
						// 如果验证码正确跳到首页
						this.$myRequest({
							url: '/wxLogin/getUserInfo',
							data: {
								openid: this.userInfoData.openid
							}
						}).then(res1 => {
							wx.setStorageSync('token', res.data.data)
							wx.setStorageSync('user', res1.data.data)
							uni.switchTab({
								url: '/pages/index/HomePage'
							})
						})
					}else{
						console.log("登录失败");
					}
				})
			},
			// 新版授权获取用户信息
			getUserProfile(){
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '获取用户信息',
					success: (res) => {
						if(res.userInfo){
							let userInfo = res.userInfo
							// 获取信息后 wx.login
							wx.login({
								success: (res2) => {
									if(res2.code){
										let code = res2.code
										// 请求返回openid
										this.$myRequest({
											method: 'POST',
											url: '/wxLogin/getOpenid',
											data: code,
											}).then(res3 => {
												if(res3.data.flag){
													// oK5CP51bUvgVL4SLSDThh8jPRbY8
													// 将信息给到userInfoData对象里
													this.userInfoData.openid = res3.data.data.openid
													this.userInfoData.avatarUrl = userInfo.avatarUrl
													this.userInfoData.gender = userInfo.gender
													this.userInfoData.nickName = userInfo.nickName
													// 根据openid获取电话号
													this.getPhoneByOpenid();
												}else{
													uni.showToast({
														title: '网络异常',
														icon: 'error',
														duration: 2000
													})
												}
											})
									}else{
										
									}
								}
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '您已拒绝授权',
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
		},
		
	}
	
</script>

<style>
.body{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('http://101.43.223.224:8765/image/getImageById?id=312');
	background-size: 750rpx 1300rpx;
}
</style>
